<template>
    <div>
        <div class="container">
            <div class="nav">
                <div @click="homePage" class="index">首页</div>
                <div>
                    <n-popselect v-model:value="selectedCategory" :options="categoryOptions" trigger="click"
                        @update:value="changeCategory">
                        <div>分类<span>{{ categoryName }}</span></div>
                    </n-popselect>
                </div>
                <div @click="dashboard">后台</div>
            </div>
            <n-divider />
            <n-space class="search">
                <n-input v-model:value="pageInfo.keywords" :style="{ width: '500px' }" placeholder="请输入关键字" />
                <n-button type="primary" ghost @click="getBlogs">搜索</n-button>
            </n-space>
            <div v-for="(blog, index) in blogList" :key="index" style="margin-bottom:15px;cursor:pointer">
                <n-card :title="blog.title" @click="toDetail(blog)">
                    {{ blog.content }}
                    <template #footer>
                        <div>发布时间：{{ blog.create_time }}</div>
                    </template>
                </n-card>
            </div>
            <n-pagination v-model:page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
                :page-count="pageInfo.pageCount" :on-update:page="updatePage" show-size-picker :page-sizes="pageSizes"
                :on-update:page-size="updatePageSize" />
            <n-divider />
            <div class="footer">
                <div>Power by 破烂小鱼</div>
                <div>gitee</div>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted, computed } from "vue"
import { AdminStore } from "../store/AdminStore"
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const route = useRoute()
const axios = inject("axios")
const message = inject("message")
const dialog = inject("dialog")
const categoryOptions = ref([])
const selectedCategory = ref(null)
const pageInfo = reactive({
    page: 1,
    pageSize: 3,
    pageCount: 0,
    count: 0,
    keywords: "",
    categoryId: 0
})
const pageSizes = [
    {
        label: '3 每页',
        value: 3
    },
    {
        label: '5 每页',
        value: 5
    },
    {
        label: '10 每页',
        value: 10
    },
]

const blogList = ref([])
onMounted(() => {
    getCategory()
    getBlogs()
})

// 顶部导航
const homePage = () => {
    router.push("/")
}
const dashboard = () => {
    router.push("/login")
}

// 计算出选中的分类名
const categoryName = computed(() => {
    let selectedOption = categoryOptions.value.find(option => {
        return option.value == selectedCategory.value
    })
    return selectedOption ? " " + selectedOption.label : ""
})

//获取分类数据
const getCategory = async () => {
    let res = await axios.get("/category/list")
    if (res.data.code == 200) {
        categoryOptions.value = res.data.rows.map(item => {
            return {
                label: item.name,
                value: item.id
            }
        })
    } else {
        message.error("数据请求失败")
    }
}



//获取文章列表
const getBlogs = async () => {
    let res = await axios.get(`/blog/search?keywords=${pageInfo.keywords}&page=${pageInfo.page}&pageSize=${pageInfo.pageSize}&categoryId=${pageInfo.categoryId}`)
    if (res.data.code == 200) {
        let tempRows = res.data.data.rows
        for (const row of tempRows) {
            row.content += " ..."
            let d = new Date(row.create_time)
            row.create_time = `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}`
        }
        blogList.value = tempRows
        //文章总数
        pageInfo.count = res.data.data.count
        //    计算页码总数
        pageInfo.pageCount = parseInt(pageInfo.count / pageInfo.pageSize) + (pageInfo.count % pageInfo.pageSize > 0 ? 1 : 0)
    }
}

// 页码更改
const updatePage = (page) => {
    pageInfo.page = page
    getBlogs()
}
//page-size更改
const updatePageSize = (pageSize) => {
    pageInfo.pageSize = pageSize
    getBlogs()
}

// 导航分类更改
const changeCategory = (categoryId) => {
    pageInfo.categoryId = categoryId
    getBlogs()
}

const toDetail = (blog) => {
    router.push({ path: "/detail", query: { id: blog.id } })
}
</script>

<style lang="scss" scoped>


.container {
    width: 1200px;
    margin: 0 auto;
}

.nav {
    display: flex;
    font-size: 30px;
    padding-top: 20px;
    color: #6467;
    .index{
        color: #f60;
    }
    div {

        cursor: pointer;
        margin-right: 15PX;

        &:hover {
            color: #f60;
        }
        

        span {
            font-size: 20px;
        }
    }
}

.search {
    margin-bottom: 15px;
}

.footer {
    text-align: center;
    line-height: 25px;
    color: #64676a;

}
</style>